<template>
  <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
    <div class="navbar">{{title1}}</div>
    <el-sub-menu class="menu" index="1">
      <template #title>
        <el-avatar :src=avatarURL />
      </template>
      <router-link :to="{ name: 'setting' }" >
        <el-menu-item index="5" @click="refresh" >个人中心</el-menu-item>
      </router-link>
      <el-menu-item index="6" @click="onLogout">退出登录</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { ref,onMounted ,defineProps,defineEmits} from 'vue'
import { getAdmin } from '../api'
import defaultAvatarURL from  '/images/avatar-default.png'
import useAdmin from '../stores/admin'
import router from '../router'
import useToken from '../stores/token'
import notification from '../utils/notification'

defineProps({
  title1:{
    type:String
  }
})
const emit=defineEmits(["set_value"])

const { removeToken } = useToken()

const { admin, updateAdmin, removeAdmin } = useAdmin()

const refresh=(event)=>{
  emit("set_value",6);
}

onMounted(() => {
  loadAdmin()
})

const loadAdmin = async () => {
  let data = await getAdmin()
  updateAdmin({
    username: data.username,
    avatar: data.avatar
  })
  if(admin.avatar!=""){
    avatarURL.value=admin.avatar
  }
}

const avatarURL=ref(admin.avatar || defaultAvatarURL)

const onLogout = async () => {
  removeToken()
  removeAdmin()
  router.push({ name: 'login' })
  notification({
    message: '退出成功',
    type: 'success'
  })
}
</script>

<style scoped lang="scss">

.navbar {
  color: #666;
  font-size: 20px;
}
.menu {
  margin-left: auto;
}

</style>